<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑合同</title>
    <link href="../../layui/css/layui.css" rel="stylesheet">
    <link href="../../static/css/style.css" rel="stylesheet">
    <script src="../../static/js/jquery.min.js"></script>
    <script src="../../static/js/jquery.cookie.js"></script>
    <script src="../../layui/layui.js"></script>
    <script src="../../static/js/base.js"></script>
    <script src="../../static/js/ax.js"></script>
    <!--[if lt IE 9]>
    <script src="../../static/js/html5.js"></script>
    <script src="../../static/js/respond.js"></script>
    <![endif]-->

</head>

<body class="bg_w">
<div class="content-wrap">
    <div class="layui-row">
        <form class="layui-form layui-form-pane" id="from1">
            <input type="hidden" id="dataId" value="" />
            <input type="hidden" id="dscDsId" value="" />
            <input type="hidden" id="dscDsCode" value="" />
            <input type="hidden" id="dscDsName" value="" />
            <div class="layui-row layui-col-space10">
                <div class="layui-col-sm6" id="contractCodeItem" style="display: none">
                    <label class="layui-form-label">合同编号</label>
                    <label class="layui-input-inline" id="contractCode"></label>
                </div>
                <div class=" layui-col-sm6">
                    <label class="layui-form-label">合同名称</label>
                    <div class="layui-input-block">
                        <input type="text"  id="dscName" class="layui-input" lay-verify="required" maxlength="100" placeholder="请输入合同名称">
                    </div>
                </div>
                <div class="layui-col-sm6">
                    <label class="layui-form-label">签订驾校</label>
                    <div class="layui-input-block" id="dsName" style="border: 1px solid #e6e6e6;">
                    </div>
                </div>
                <div class="layui-col-sm6">
                    <label class="layui-form-label">签订人</label>
                    <div class="layui-input-block">
                        <input type="text" id="dscSignName" value="" class="layui-input" lay-verify="required" maxlength="100" placeholder="请输入签订人姓名">
                    </div>
                </div>
                <div class="layui-col-sm6">
                    <label class="layui-form-label">签订时间</label>
                    <div class="layui-input-block">
                        <input type="text" id="dscSignTime" value="" class="layui-input" lay-verify="required" placeholder="请选择签订时间" autocomplete="off">
                    </div>

                </div>

                <div class="layui-col-sm6">
                    <label class="layui-form-label">合同开始时间</label>
                    <div class="layui-input-block">
                        <input type="text" id="dscBeginTime" value="" class="layui-input" lay-verify="required" placeholder="请选择合同开始时间" autocomplete="off">
                    </div>

                </div>

                <div class="layui-col-sm6">
                    <label class="layui-form-label">合同结束时间</label>
                    <div class="layui-input-block">
                        <input type="text" id="dscEndTime" value="" class="layui-input" lay-verify="required" placeholder="请选择合同结束时间" autocomplete="off">
                    </div>

                </div>

                <div class="layui-col-sm6">
                    <label class="layui-form-label">客户名称</label>
                    <div class="layui-input-block">
                        <input type="text" id="dscCustomerName" class="layui-input"  placeholder="请输入客户名称">
                    </div>
                </div>
                <div class="layui-col-sm6">
                    <label class="layui-form-label">联系人</label>
                    <div class="layui-input-block">
                        <input type="text" id="dscContactsName" class="layui-input"  placeholder="请输入联系人姓名">
                    </div>
                </div>
                <div class="layui-col-sm6">
                    <label class="layui-form-label">联系电话</label>
                    <div class="layui-input-block">
                        <input type="number" id="dscContactsPhone" class="layui-input"  placeholder="请输入联系人电话">
                    </div>
                </div>

            </div>
            <div class="layui-form-item">
                <h5 class="lheight">合同文件：</h5>
                <button type="button" class="layui-btn add_btn" id="btnUploadPicture">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
                <button type="button" class="layui-btn add_btn" id="btnUploadOther">
                    <i class="layui-icon">&#xe67c;</i>上传其他文件
                </button>
                <span style="color: #666;">上传后缀名为zip、rar、7z、doc、docx、pdf的文件</span>
                <div class="pictureList layui-inline" style="margin-top: 10px;">
                    <!--<div class="fileItem">-->
                    <!--<i class="layui-icon layui-icon-close removeFile"></i>-->
                    <!--<img src="file.jpg">-->
                    <!--</div>-->
                </div>
                <div class="otherFileList layui-inline" style="margin-top: 10px;">
                    <!--<div class="fileItem">-->
                    <!--<i class="layui-icon layui-icon-close removeFile"></i>-->
                    <!--<img src="file.jpg">-->
                    <!--</div>-->
                </div>
            </div>

            <div class="layui-input-block">

                <button type="button" id="btnClose" class="layui-btn layui-btn-primary btn-left">关闭</button>
                <button type="button" id="btnSubmit" class="layui-btn add_btn btn-left">提交</button>
            </div>


        </form>
    </div>
</div>
</body>

<script>

    var pictureFileList = [];
    var otherFileList = [];
    var $;
    layui.use(['form','layer','laydate','upload'], function() {
        $ = layui.$;
        var form = layui.form,
            layDateDscSignTime = layui.laydate,
            layDateDscBeginTime = layui.laydate,
            layDateDscEndTime = layui.laydate,
            // uploadPicture = layui.upload,
            // uploadOtherFile = layui.upload,
            layer=layui.layer;

        // 初始化日期控件
        layDateDscSignTime.render({
            elem: '#dscSignTime',
            type:"datetime"
        });
        layDateDscBeginTime.render({
            elem: '#dscBeginTime',
            type:"datetime"
        });
        layDateDscEndTime.render({
            elem: '#dscEndTime',
            type:"datetime"
        });

        // 初始化上传控件
        // 上传图片
        // uploadPicture.render({
        ax.upload({
            elem: '#btnUploadPicture' //绑定元素
            ,url: fileUploadUrl //上传接口
            ,accept:"images"    // images（图片）、file（所有文件）、video（视频）、audio（音频）
            ,acceptMime:"image/*"   // 打开文件选择框时，筛选出的文件类型:acceptMime: 'image/*'（只显示图片文件）acceptMime: 'image/jpg, image/png'（只显示 jpg 和 png 文件）
            ,before: function(obj){
                layer.msg('图片上传中...', {
                    icon: 16,
                    shade: 0.01,
                    time: 0
                })
            }
            ,done: function(res){
                layer.close(layer.msg());//关闭上传提示窗口
                if(res.code == 0) {
                    //上传完毕回调
                    addPictureFile(res.data);
                } else {
                    layer.msg("上传失败");
                }

            }
            ,error: function(){
                //请求异常回调
                layer.msg("上传失败");
            }
        });
        ax.upload({
        // uploadOtherFile.render({
            elem: '#btnUploadOther' //绑定元素
            ,url: fileUploadUrl //上传接口
            ,accept:'file'    // images（图片）、file（所有文件）、video（视频）、audio（音频）
            ,exts:'zip|rar|7z|doc|docx|pdf'   // 允许上传的文件后缀。一般结合 accept 参数类设定
            ,before: function(obj){
                layer.msg('文件上传中...', {
                    icon: 16,
                    shade: 0.01,
                    time: 0
                })
            }
            ,done: function(res){
                layer.close(layer.msg());//关闭上传提示窗口
                if(res.code == 0) {
                    //上传完毕回调
                    addOtherFile(res.data);
                } else {
                    layer.msg("上传失败");
                }

            }
            ,error: function(){
                //请求异常回调
                layer.msg("上传失败");
            }
        });
        
        $("#dsName").on("click", function () {
            layer.open({
                type: 2,
                area: ['90%', '80%'],
                fixed: true, //不固定
                maxmin: true,
                content: '../common/selectDriverSchool.html?isBatch=0'
            });
        });

        $('#btnClose').on("click", function () {
            parent.layer.close(parent.layer.getFrameIndex(window.name));
        });

        $('#btnSubmit').on('click', function(){
            var contractData = {
                id:$("#dataId").val(),
                dscDsId:$("#dscDsId").val(),
                dscDsCode:$("#dscDsCode").val(),
                dscDsName:$("#dscDsName").val(),
                dscName:$("#dscName").val().trim(),
                dscCustomerName:$("#dscCustomerName").val().trim(),
                dscContactsName:$("#dscContactsName").val().trim(),
                dscContactsPhone:$("#dscContactsPhone").val().trim(),
                dscSignName:$("#dscSignName").val().trim(),
                dscSignTime:$("#dscSignTime").val(),
                dscBeginTime:$("#dscBeginTime").val(),
                dscEndTime:$("#dscEndTime").val(),
                isDel:"del_yes",
                dscFileList:pictureFileList.concat(otherFileList)
            };
            if(checkData(contractData)) {
                saveData(contractData);
            }
        });

        $(".otherFileList,.pictureList").on("click", ".removeFile", function () {
            var fileObj = $(this).parent().data("data");
            if(fileObj.dscFileType == "picture") {
                // 从图片数组中移除图片
                $.each(pictureFileList, function(index, f) {
                    if(f.dscFileId == fileObj.dscFileId) {
                        pictureFileList.splice( index, 1 );
                        return false;
                    }
                });
            } else {
                // 从其他文件数组中移除其他文件
                $.each(otherFileList, function(index, f) {
                    if(f.dscFileId == fileObj.dscFileId) {
                        otherFileList.splice( index, 1 );
                        return false;
                    }
                });
            }
            // 移除文件DOM元素
            $(this).parent().remove();
        });

        var addPictureFile = function (fileId) {
            var fileObj = {
                dscFileId:fileId,
                dscFileType:"picture"
            };
            pictureFileList.push(fileObj);

            var html = [];
            html.push("<div class='fileItem'>");
            html.push(" <i class='layui-icon layui-icon-close removeFile'></i>");
            html.push(" <img src='" + fileShowUrl + "?id=" + fileId + "'>");
            html.push("</div>");

            var $item = $(html.join(""));
            $item.data("data", fileObj);
            $(".pictureList").append($item);
        };

        var addOtherFile = function (fileId) {
            var fileObj = {
                dscFileId:fileId,
                dscFileType:"other"
            };
            otherFileList.push(fileObj);
            // 显示
            var html = [];
            html.push("<div class='fileItem'>");
            html.push(" <i class='layui-icon layui-icon-close removeFile'></i>");
            html.push(" <img src='file.jpg'>");
            html.push("</div>");

            var $item = $(html.join(""));
            $item.data("data", fileObj);
            $(".otherFileList").append($item);
        };

        var initPage = function(dataId) {
            ax.get({
                url: backendWebUrl + "/api/dsc/detail",
                data: {dataId:dataId},
                success: function (res) {
                    if (res.code == 0) {
                        loadPage(res.data);
                    } else {
                        layer.msg(res.message);
                    }
                }

            });
        };
        var loadPage = function (pageData) {
            $("#dscDsId").val(pageData.contractData.dscDsId);
            $("#dscDsCode").val(pageData.contractData.dscDsCode);
            $("#dscDsName").val(pageData.contractData.dscDsName);
            $("#dsName").text(pageData.contractData.dscDsCode + "-" + pageData.contractData.dscDsName);
            $("#dscName").val(pageData.contractData.dscName);
            $("#dscCustomerName").val(pageData.contractData.dscCustomerName);
            $("#dscContactsName").val(pageData.contractData.dscContactsName);
            $("#dscContactsPhone").val(pageData.contractData.dscContactsPhone);
            $("#dscSignName").val(pageData.contractData.dscSignName);
            $("#dscSignTime").val(pageData.contractData.dscSignTime);
            $("#dscBeginTime").val(pageData.contractData.dscBeginTime);
            $("#dscEndTime").val(pageData.contractData.dscEndTime);
            $("#contractCode").text(pageData.contractData.dscCode);
            $("#contractCodeItem").show();
            // 加载合同列表
            $.each(pageData.dscFileList, function (index, fileObj) {
                if(fileObj.dscFileType == "picture") {
                    addPictureFile(fileObj.dscFileId);
                } else {
                    addOtherFile(fileObj.dscFileId);
                }
            });
        };
        // 编辑初始化数据
        var dataId = getQueryString("id");
        $("#dataId").val(dataId);
        if(dataId != null && dataId != "") {
            // 有ID，为编辑
            initPage(dataId);
        }
    });

    function checkData(contractData) {
        var checkResult = true;
        if(contractData.dscName.length == 0) {
            layer.msg("合同名称不能为空");
            checkResult = false;
        } else if(contractData.dscSignName.length == 0) {
            layer.msg("签订人不能为空");
            checkResult = false;
        } else if(contractData.dscSignTime.length == 0) {
            layer.msg("签订时间不能为空");
            checkResult = false;
        } else if(contractData.dscCustomerName.length == 0) {
            layer.msg("客户名称不能为空");
            checkResult = false;
        } else if(contractData.dscContactsName.length == 0) {
            layer.msg("联系人不能为空");
            checkResult = false;
        } else if(contractData.dscContactsPhone.length == 0) {
            layer.msg("联系电话不能为空");
            checkResult = false;
        }else if(!(/^1[34578]\d{9}$/.test(contractData.dscContactsPhone))){
            layer.msg("联系电话有误");
            checkResult = false;
        } else if(contractData.dscBeginTime.length == 0) {
            layer.msg("合同开始时间不能为空");
            checkResult = false;
        } else if(contractData.dscEndTime.length == 0) {
            layer.msg("合同截止时间不能为空");
            checkResult = false;
        } else if(contractData.dscFileList.length == 0) {
            layer.msg("请上传合同附件");
            checkResult = false;
        }
        return checkResult;
    }
    function saveData(contractData) {

        var dataId = $("#dataId").val();
        if(dataId != null && dataId != "") {
            ax.post({
                url: backendWebUrl + "/api/dsc/update",
                data: JSON.stringify(contractData),
                success: function (res) {
                    if (res.code == 0) {
                        topFrame.location.reload();
                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                    } else {
                        layer.msg(res.message);
                    }
                }

            });
        } else {
            ax.post({
                url: backendWebUrl + "/api/dsc/add",
                data: JSON.stringify(contractData),
                success: function (res) {
                    if (res.code == 0) {
                        topFrame.location.reload();
                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                    } else {
                        layer.msg(res.message);
                    }
                }

            });
        }
    }
    function selectDriverSchool(dsObj) {
        $("#dscDsId").val(dsObj.id);
        $("#dscDsCode").val(dsObj.code);
        $("#dscDsName").val(dsObj.name);
        $("#dsName").text(dsObj.code + "-" + dsObj.name);
    }

    // $(document).on("mouseenter mouseleave", ".file-iteme", function(event){
    //     if(event.type === "mouseenter"){
    //         //鼠标悬浮
    //         $(this).children(".info").fadeIn("fast");
    //         $(this).children(".handle").fadeIn("fast");
    //     }else if(event.type === "mouseleave") {
    //         //鼠标离开
    //         $(this).children(".info").hide();
    //         $(this).children(".handle").hide();
    //     }
    // });
</script>


</html>